<html>
	<head>
	<link rel="stylesheet" href="/static/css/jquery.mobile.min.css" />
	<script src="/static/js/jquery.min.js"></script>
	<script src="/static/js/jquery.mobile.min.js"></script>
	<title>OYPAA 2013 Registration</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<script>
	  	$(document).bind('pageinit', function(event) {
	    $( "#delete_button" ).bind( "click", function(event, ui) {
	    	var item_key = $(this).attr("key");
	          });
	    });
	</script>
	</head>
	<body>
		<div data-role="page" data-theme="b" id="registration_list">
			{% macro header(title) -%}
			<div data-role="header" id="header">
			<a href="/" data-icon="home" class="ui-btn-Left" data-theme="b">Home</a>
			<a href="{{logout_url}}" data-icon="delete" class="ui-btn-Right" data-theme="b">Logout</a>
				<h1>{{ title }}</h1>
					<div data-role="navbar" data-id="nav">
        				<ul>
        						<li><a href="#registration_list" data-transition="slide">Registration list</a></li>
        						<li><a href="#new_registration" data-transition="slide">New Registration</a></li>
                            	<li><a href="/stats" data-transition="slide">Registration Statistics</a></li>
        				</ul>
        			</div>
        	</div>
        	{%- endmacro %}
        	{{ header('Registration List') }}
	        <div data-role="content">
	        	<ul id="reg_list" data-role="listview">
	        		{% for registration in registrations %}
						<li><a href="#"><h3>{{ registration.last_name }}, {{ registration.first_name }}</h3>
							<p>{{ registration.street_address }} {{ registration.city }}, {{ registration.state }} {{ registration.zip_code }}</p>
			        		<p><b>email:</b> {{ registration.email }}</p>
			        		<p><b>phone:</b> {{ registration.phone_number }}</p></a>
			        		<a href="#delete_{{ registration.key() }}" id="delete_button" data-icon="delete" data-rel="popup" data-position-to="window" data-transition="pop">Delete</a>
			        		<div data-role="popup" id="delete_{{ registration.key() }}" data-theme="a" data-overlay-theme="a" class="ui-content" style="max-width:400px;">
			        			<h3>Delete Item</h3>
			        			<p>Are you sure you want to delete this?</p>
			        			<a href="#" data-role="button" data-rel="back" data-inline="true" data-mini="true">Cancel</a>	
			        			<a href="/delete?key={{ registration.key() }}" id="confirm_delete" data-role="button" data-theme="b" data-icon="delete" data-inline="true" data-mini="true">Delete</a>
			        		</div>
		        		</li>
	        		{% endfor %}
	        	</ul>
	       	</div>
		</div>
		<div data-role="page" data-theme="b" id="new_registration">
			{{ header('New Registration') }}
	        <div data-role="content">
		        <form action="/sign" method="post">
					<div class="registration_form" style="text-align:center;" data-role="fieldcontain">
			           <label class="ui-hidden-accessible" for="first_name">First Name:</label><input data-mini="true" type="text" id="first_name" name="first_name" value="" placeholder="First Name"><br>
			           <label class="ui-hidden-accessible" for="last_name">Last Name:</label><input data-mini="true" type="text" id="last_name" name="last_name" value="" placeholder="Last Name"><br>
			           <label class="ui-hidden-accessible" for="street_address">Street Address:</label><input data-mini="true" type="text" id="street_address" name="street_address" value="" placeholder="Street Address"><br>
			           <label class="ui-hidden-accessible" for="city">City:</label><input data-mini="true" type="text" id="city" name="city" value="" placeholder="City"><br>
			           <label class="ui-hidden-accessible" for="state">State:</label><input data-mini="true" type="text" id="state" name="state" value="" placeholder="State"><br>
			           <label class="ui-hidden-accessible" for="zip_code">Zip Code:</label><input data-mini="true" type="text" id="zip_code" name="zip_code" value="" placeholder="Zip Code"><br>
			           <label class="ui-hidden-accessible" for="email">Email:</label><input data-mini="true" type="email" id="email" name="email" value="" placeholder="Email"><br>
			           <label class="ui-hidden-accessible" for="phone_number">Phone Number:</label><input data-mini="true" type="text" id="phone_number" name="phone_number" value="" placeholder="Phone Number"><br>
					</div>
					<div class="registration_from" style="text-align:center;" data-role="fieldcontain">
					    <input type="submit" value="Enter Registration">
					</div>
				</form>
			</div>
		</div>
	</body>
</html>